<!--
 * @Author: 王灿
 * @Date: 2019-11-22 21:43:35
 * @LastEditTime : 2019-12-25 21:06:52
 * @Description: 新增/编辑 SKU
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-sku\sku-operate\index.vue
 -->
<template>
  <div class="sku-operate">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item prop="tagName">
        <el-row>
          <el-input v-model="ruleForm.tagName" placeholder="sku名称" clearable></el-input>
        </el-row>
      </el-form-item>
      <el-form-item prop="skuExplain">
        <el-row>
          <el-input v-model="ruleForm.skuExplain" placeholder="sku说明" clearable></el-input>
        </el-row>
      </el-form-item>
      <el-form-item prop="price">
        <el-row>
          <el-input v-model="ruleForm.price" placeholder="sku价格" clearable></el-input>
        </el-row>
      </el-form-item>
      <el-form-item prop="stock">
        <el-row>
          <el-input v-model="ruleForm.stock" placeholder="sku库存" clearable></el-input>
        </el-row>
      </el-form-item>
      <el-form-item prop="remark">
        <el-row>
          <el-input v-model="ruleForm.remark" placeholder="sku备注" clearable></el-input>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
      <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { getSkuAdd, getSkuUpdate } from '@/api/commodity.js'
export default {
  name: 'SkuOperate',
  props: {
    // 商品Id
    productId: {
      type: [Number, String],
      default: 0
    },
    // 编辑默认数据
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        tagName: '',
        skuExplain: '',
        price: '',
        stock: '',
        remark: '',
        productId: this.productId
      },
      rules: {
        tagName: [
          { required: true, message: '请输入sku名称', trigger: 'blur' }
        ],
        skuExplain: [
          { required: true, message: '请输入sku说明', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入sku价格', trigger: 'blur' },
          { pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '输入两位小数点', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入sku库存', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '库存必须为数字值', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 监听数据变化
    row() {
      this.onGetDefaultData()
    }
  },
  created() {
    this.onGetDefaultData()
  },
  methods: {
    // 默认数据
    onGetDefaultData() {
      if (this.row) {
        this.ruleForm = {
          id: this.row.id,
          tagName: this.row.tagName,
          skuExplain: this.row.skuExplain,
          price: this.row.price,
          stock: this.row.stock,
          remark: this.row.remark,
          productId: this.productId
        }
      }
    },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.row.id) {
            this.onUpdate()
          } else {
            this.onAdd()
          }
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = {isShow: false}
      this.$emit('addTableRow', data)
    },
    // 新增
    onAdd() {
      getSkuAdd(this.ruleForm).then(res => {
        this.$notify.success({
          title: '提示',
          message: '新增成功'
        })
        this.onRefresh()
      })
    },
    // 编辑
    onUpdate() {
      getSkuUpdate(this.ruleForm).then(res => {
        this.$notify.success({
          title: '提示',
          message: '编辑成功'
        })
        this.onRefresh()
      })
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        // TODO
        this.$emit('onChangeRefresh')
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.sku-operate {
  .el-form-item {
    margin-right: 0;
  }
}
</style>